<template>
    <!-- 核心企业授信审批 -->
    <!-- 授信结果登记 -->
    <div class="extene">
        <div class="table">
            <div class="top">
                <el-select class="select1" v-model="value" placeholder="企业名称" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        :disabled="item.disabled" />
                </el-select>
                <el-input v-model="input" class="inp" placeholder="请输入要查询的核心企业名称">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
                <el-select class="select2" v-model="value2" placeholder="全部" size="large">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"
                        :disabled="item.disabled" />
                </el-select>
                <div class="btn">
                    <el-button class="btn1" type="primary">查询</el-button>
                    <el-button class="btn2" type="primary" plain>重置</el-button>
                </div>
            </div>
            <div class="bottom">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="序号">
                        <template #default="scope">
                            <span> {{ scope.$index + 1 }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="企业名称">
                        <template #default="scope">
                            <span> {{ scope.row.htBusinessname }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="社会信用代码">
                        <template #default="scope">
                            <span> {{ scope.row.htSocialcreditid }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="注册资本">
                        <template #default="scope">
                            <span> {{ scope.row.htRegisteredmoney }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="业务员">
                        <template #default="scope">
                            <span> {{ scope.row.htSalesman }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="审批人">
                        <template #default="scope">
                            <span> {{ scope.row.suman }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="流程状态">
                        <template #default="scope">
                            <span> {{ scope.row.htProcessstatus }} </span>
                        </template>

                    </el-table-column>
                    <el-table-column prop="address" label="任务开始时间">
                        <template #default="scope">
                            <span> {{ scope.row.htSignndate }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" >
                        <el-icon color="rgba(78, 171, 254, 1)"><View /></el-icon> &nbsp;&nbsp;&nbsp;&nbsp;
                        <el-icon color="rgba(78, 171, 254, 1)"><Position /></el-icon>
                </el-table-column>
                </el-table>
            </div>
            <div class="box">
                <el-pagination :page-sizes="[2, 4, 6, 8]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import service from '@/apis'

const input = ref('')

let isflag = ref(false)
let fla = ref(true)
let show = () => {
    isflag.value = true
}
let hide = () => {
    isflag.value = false
}

let tableData = ref([])

onMounted(async () => {
    let res = await service.extension.htContract()
    
    if (res.data.data) {
        res.data.data.forEach((item) => {
            item.lading = false
        })
        tableData.value = res.data.data
        console.log( res.data.data);
    }
})




const value = ref('')
const value2 = ref('')
const options = [
    {
        value: '企业名称',
        label: '企业名称',
    },
    {
        value: '社会信用代码',
        label: '社会信用代码',
    },
]
const options2 = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '待提交',
        label: '待提交',
    },
    {
        value: '已处理',
        label: '已处理',
    },
]
</script>

<style scoped>
.extene .title {
    width: 200px;
    height: 40px;
    background-color: rgba(78, 171, 254, 1);
    font-size: 20px;
    color: white;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
    border-radius: 30px;
    margin-left: 30px;
}

.extene .table {
    margin-left: 30px;
    width: 1560px;
    height: 720px;
    background-color: #fafafa;
}

.select1,
.select2 {
    width: 100px;
    height: 40px;
}

.inp {
    width: 286px;
    height: 40px;
}

.table {
    position: relative;
}

.table .top {
    display: flex;
    padding: 30px;
}

.table .top .inp {
    margin-left: 20px;
}

.table .top .select2 {
    margin-left: 20px;
}

.table .top .btn {
    margin-left: 20px;
}

.table .top .btn .btn1,
.btn2 {
    width: 70px;
    height: 40px;
}

.table .box {

    position: absolute;
    left: 400px;
    bottom: 35px;

}
</style>